<template>
	<div class="app-container">
		<jk-operation-card ref="box1" class="margin-bottom-10">
			<div ref="box1" class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
					<jk-add-button :permission-prefix="prefix" class="item-gap" @click="onAddBtn({})"></jk-add-button>
					<el-button type="info" plain icon="el-icon-sort" size="small" @click="toggleExpandAll">展开/折叠</el-button>
				</div>
				<div class="flex-end-center-wrap">
					<el-input v-model="searchParams.name" size="small" class="search-bar-item-size2 item-gap margin-5-0" placeholder="部门名称" clearable @clear="onSearchBtn" @keyup.enter.native="onSearchBtn" />
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card class="margin-top-10">
			<el-table
				v-if="refreshTable"
				v-loading="tableLoading"
				:height="tableHeight + 30"
				:data="tableData"
				row-key="id"
				size="mini"
				border
				:default-expand-all="isExpandAll"
				:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
			>
				<el-table-column prop="name" label="部门名称" :min-width="260"></el-table-column>
				<el-table-column prop="leaderEmpName" label="负责人" width="120" />
				<el-table-column prop="sort" label="排序" align="center" width="80"></el-table-column>
				<el-table-column label="创建人" align="left" prop="creatorName" width="90"></el-table-column>
				<el-table-column label="创建时间" align="left" prop="createTime" width="160"></el-table-column>
				<el-table-column label="修改人" align="left" prop="updaterName" width="90"></el-table-column>
				<el-table-column label="修改时间" align="left" prop="updateTime" width="160"></el-table-column>
				<el-table-column label="操作" align="center" width="210" fixed="right" class-name="small-padding fixed-width">
					<template slot-scope="scope">
						<div class="flex-center">
							<jk-delete-button :permission-prefix="prefix" class="item-gap" @on-confirm="onDeleteBtn(scope.row)"></jk-delete-button>
							<jk-edit-button :permission-prefix="prefix" class="item-gap" @click="onEditBtn(scope.row)"></jk-edit-button>
							<jk-add-button :permission-prefix="prefix" size="mini" @click="onAddBtn(scope.row)"></jk-add-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</jk-card>

		<save-dialog
			:dialog-state="saveDialogState"
			:data-id="dataId"
			:is-add="isAdd"
			@on-visible-change="onVisibleChangeOfSaveDialog"
			@on-confirm="onConfirmButtonSaveDialog"
		/>
	</div>
</template>

<script>
    import { listDept, delDept } from '@/api/system/dept';
    import permissionMixin from '../../../mixins/permission-mixin';
    import calHeight from '../../../mixins/cal-table-height';
    import { statusList } from '../../../utils/jk/status-option-list';
    import { createTree } from '../../../utils/jk/jk-tool';
    import saveDialog from './save-dialog';

    export default {
        name: 'Dept',
        mixins: [permissionMixin, calHeight],
        components: { saveDialog },
        data() {
            return {
                prefix: 'personnel:dept',
                saveDialogState: false,
                dataId: null,
                isAdd: false,
                statusList: statusList,
                tableLoading: true,
                showSearch: true,
                tableData: [],
                isExpandAll: true,
                refreshTable: true,
                searchParams: {
                    name: null,
                    status: null
                }
            };
        },
        created() {
            this.getListRequest();
        },
        methods: {
            onConfirmButtonSaveDialog() {
                this.saveDialogState = false;
                this.getListRequest();
            },
            onVisibleChangeOfSaveDialog(e) {
                if (!e) {
                    this.dataId = null;
                }
                this.saveDialogState = e;
            },
            /** 查询部门列表 */
            getListRequest() {
                this.tableLoading = true;
                listDept(this.searchParams).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.tableData = createTree(res.data.res, {});
                    }
                });
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                this.getListRequest();
            },
            /** 新增按钮操作 */
            onAddBtn(row) {
                this.dataId = row.id ? row.id : null;
                this.isAdd = true;
                this.saveDialogState = true;
            },
            /** 展开/折叠操作 */
            toggleExpandAll() {
                this.refreshTable = false;
                this.isExpandAll = !this.isExpandAll;
                this.$nextTick(() => {
                    this.refreshTable = true;
                });
            },
            /** 修改按钮操作 */
            onEditBtn(row) {
                this.isAdd = false;
                this.dataId = row.id;
                this.saveDialogState = true;
            },
            /** 删除按钮操作 */
            onDeleteBtn(row) {
                delDept(row.id).then((res) => {
                    if (res.data.status === 200) {
                        this.getListRequest();
                        this.$tipsBar(this, 'delete');
                    }
                }).catch(() => {});
            }
        }
    };
</script>
